<template>
  <div>
    <el-table v-loading="loading" :data="dkTableData" class="w-full min-h-[calc(100vh-350px)]">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="token" label="Token" />
      <el-table-column prop="platform" label="平台" align="center">
        <template #default="scope">
          <el-image v-if="scope.row.platform" :src="scope.row.platform.logo" class="w-50px h-50px" />
          <p>{{ scope.row.platform.name }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="日期">
        <template #default="scope">
          <div>
            <div>
              <p class="text-gray-500 mb-5px">创建日期：</p>
              <p>{{ scope.row.create_time }}</p>
            </div>
            <div>
              <p class="text-gray-500 mb-5px">更新日期：</p>
              <p>{{ scope.row.update_time }}</p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="90">
        <template #default="scope">
          <el-button type="primary" @click="onClickSetting(scope.row.id, scope.row.plaid)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      background
      layout="total,prev, pager, next"
      :total="total"
      :current-page="page"
      :page-size="pageSize"
      @current-change="currentChange"
    />
    <dk-form ref="formRef" :form-data="formData" top="20vh" append-to-body :is-dialog="true" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, defineProps, defineOptions } from 'vue'
import { getPlatFormAddonListByAddon, getPlatformAddonForm } from '@/api/platform_addon'

defineOptions({
  name: 'DkPlatformAddonList'
})

const props = defineProps({
  addon: {
    default: () => ({}),
    type: Object
  }
})

const page = ref(1)
const pageSize = ref(5)
const total = ref(0)
const dkTableData = ref([])
const searchData = reactive({
  title: ''
})
const formData = ref(null)
const loading = ref(true)
const formRef = ref(null)

onMounted(() => {
  getList(page.value)
})

const onSearch = () => {
  getList(1)
}

const currentChange = (currentPage) => {
  getList(currentPage)
}

const getList = (currentPage) => {
  searchData.addon_name = props.addon.name
  page.value = currentPage
  getPlatFormAddonListByAddon(page.value, pageSize.value, searchData).then((res) => {
    dkTableData.value = res.data
    total.value = parseInt(res.msg)
    loading.value = false
  })
}

const onClickSetting = (id, plaid) => {
  getPlatformAddonForm(id, plaid, 1).then((res) => {
    formData.value = res.data
    formRef.value.show()
  })
}
</script>

<style>
.addon-img {
  width: 80px;
  height: 80px;
  border-radius: 10px;
}
</style>
